<template>
    <a-row style="margin-top:1em">
        <NoAuthPage v-showNoAuth="'D18-1'" :imgBoxStyle="{height:'40vh',margin:'0 10px 10px'}"/>
        <div v-userAuth="'D18-1'">
            <div style="margin:0 0 1em 0 ">
            <a-tooltip placement='bottom' v-userAuth="'D18-2'">
                <template slot='title'>
                    <span>{{$t('Create')}}</span>
                </template>
                <a-button type="primary" @click="createp = true">
                    <!-- icon='file-add' -->
                    <!-- <i class="icon icon-new16f"></i> -->
						<Iconfont class="icon" type="icon-new16f"></Iconfont>
                        {{$t('Create')}}
                </a-button>
            </a-tooltip>
            <a-tooltip placement='bottom' v-userAuth="'D18-3'">
                <template slot='title'>
                    <span>{{$t('Edit')}}</span>
                </template>
                <a-button :disabled="selectedRowKeys.length==0" type='primary' style="margin-left:1em" @click="openmodal('editp')">
                    <!-- icon='form' -->
                    <!-- <i class="icon icon-edit16f"></i> -->
						<Iconfont class="icon" type="icon-edit16f"></Iconfont>
                        {{$t('Edit')}}
                </a-button>
            </a-tooltip>
            <a-tooltip placement='bottom' v-userAuth="'D18-4'">
                <template slot='title'>
                    <span>{{$t('Client')}}{{$t('Operate')}}</span>
                </template>
                <a-button :disabled="selectedRowKeys.length==0" type='primary' style="margin-left:1em" @click="openmodal('editip')">
                    <!-- icon='team' -->
                    <!-- <i class="icon icon-subuser16f"></i> -->
						<Iconfont class="icon" type="icon-subuser16f"></Iconfont>
                        {{$t('Client')}}{{$t('Operate')}}
                </a-button>
            </a-tooltip>
            <a-tooltip placement='bottom' v-userAuth="'D18-5'">
                <template slot='title'>
                    <span>{{$t('Delete')}}</span>
                </template>
                <a-button :disabled="selectedRowKeys.length==0" type='danger' style="margin-left:1em" @click="openmodal('delpath')">
                    <!-- icon='close-circle' -->
                    <!-- <i class="icon icon-error16f"></i> -->
						<Iconfont class="icon" type="icon-error16f"></Iconfont>
                        {{$t('Delete')}}
                </a-button>
            </a-tooltip>
            </div>
        
        <a-table class="bigstyle" rowKey="id" :loading="loading" :columns='nfscolumns' :dataSource='nfsdata' :pagination='pagination' size='small' 
                 :rowSelection='{type:"radio",selectedRowKeys:selectedRowKeys,onChange:onSelectChange}' bordered
                 :locale="defaultSetting">
                 <template slot="access_type" slot-scope="access_type, record">
                    <span v-if="access_type == '1'">{{ $t('读写') }}</span>
                    <span v-else-if="access_type == '2'">{{ $t('只读') }}</span>
                 </template>
                 <template slot="squash" slot-scope="squash, record">
                    <span v-if="squash == '1'">no_root_squash</span>
                    <span v-else-if="squash == '2'">root_squash</span>
                 </template>
                 <template slot="version" slot-scope="text, record">
                    <span v-if="!record.pseudo">3</span>
                    <span v-else>3,4</span>
                 </template>
                 <template slot="status" slot-scope="status, record">
                    <div v-if="status == 0">
                        <span class="dot success"></span>
                        {{ $t('健康') }}
                    </div>
                    <div v-else-if="status == 1">
                        <span class="dot fail"></span>
                        {{ $t('异常') }}
                    </div>
                    <div v-else-if="status == 2">
                        <span class="dot fail"></span>
                        {{ $t('错误') }}
                    </div>
                </template>
            <!-- <span slot="operation" slot-scope="text, record">
                <a-tooltip placement='bottom'>
                    <template slot='title'>
                        <span>{{$t('Create')}}</span>
                    </template>
                    <a-button type="primary" icon='file-add' @click="showModal(record.id)"></a-button>
                </a-tooltip>
                <a-tooltip placement='bottom'>
                    <template slot='title'>
                        <span>{{$t('Edit')}}</span>
                    </template>
                    <a-button type='primary' style="margin-left:1em" icon='form' @click="editModal(record.des)"></a-button>
                </a-tooltip>
                <a-tooltip placement='bottom'>
                    <template slot='title'>
                        <span>{{$t('Delete')}}</span>
                    </template>
                    <a-button type='danger' style="margin-left:1em" icon='close-circle' @click="delModal(record.des)"></a-button>
                </a-tooltip>
            </span> -->
        </a-table>
        <!-- 客户端ip -->
        <!-- <p style="color:var(--themeColor)" class="tabs-top-title">{{$t('Client')}}ip</p>
        <a-table class="bigstyle" :loading="loading" :columns='ipcolumns' :dataSource='ipdata' 
                 :pagination='pagination' size='small' bordered :locale="defaultSetting" rowKey='ip'></a-table> -->
  		</div>
        <Cpath :cp='createp' @omodal='changemodal' ref="createRef"></Cpath>
  		<Epath :ep='editp' @omodal='changemodal' :onelist='record'></Epath>
        <Editclient :ss='editip' @omodal='changemodal' :tarname='record' ></Editclient>
    </a-row>
</template>
<script>
import Epath from './filepro/editpath'
import Cpath from './filepro/createpath'
import Editclient from './filepro/editclient'
import EmptyData from '@/components/common/EmptyData'
import NoAuthPage from '@/components/common/NoAuthPage'

import request from '@/request/request'

export default {
    name:'Nfs',
    components:{Epath,Cpath,Editclient, EmptyData, NoAuthPage},
    data(){
        return{
            nfsdata:[],
			loading:true,
            record:[],
            selectedRowKeys:[],
            ipdata:[],
            nfscolumns:[
				{title: this.$t('Path'),dataIndex:'path',key:'path',sorter:(a,b)=>a.path.length - b.path.length,scopedSlots: { customRender: 'path' }},
				{title: this.$t('Alias2'),dataIndex:'pseudo',key:'pseudo',sorter:(a,b)=>a.pseudo.length - b.pseudo.length},
				{title: this.$t('Access-permission'),dataIndex:'access_type',key:'access_type',scopedSlots: { customRender: 'access_type' }},
				{title: 'squash' ,dataIndex:'squash',key:'squash',scopedSlots: { customRender: 'squash' }},
				{title: 'NFS '+this.$t('Version'),scopedSlots: { customRender: 'version' }},
                {title: this.$t('共享类型状态'), dataIndex: 'status', key: 'status',  scopedSlots: { customRender: 'status' }},

				// {title: this.$t('Client'),dataIndex:'des',key:'des',sorter:(a,b)=>a.client.length - b.client.length},
				// {title: 'operation',dataIndex: 'operation',scopedSlots: { customRender: 'operation' }}
            ],
            ipcolumns:[
				{title: this.$t('Client'),dataIndex:'ip',key:'ip',sorter:(a,b)=>a.client.length - b.client.length},
				{title: this.$t('Access-permission'),dataIndex:'access_type',key:'access_type',sorter:(a,b)=>a.access_type.length - b.access_type.length},
				{title: this.$t('Compress'),dataIndex:'squash',key:'squash',sorter:(a,b)=>a.squash.length - b.squash.length},
            ],
            pagination:{
            	defaultPageSize:5,
              	showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
              	showSizeChanger:true,
              	pageSizeOptions: ['5', '10', '15', '20'],
              	onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
			},
	        createp:false,
            editp:false,
            editip:false,
            mark:0,
            defaultSetting: {emptyText:<EmptyData />}
        }
    },
    computed:{
        getlanguage(){
            return this.$store.state.language
        }
	},
    watch:{
        getlanguage(val){
            this.nfscolumns=[
				{title: this.$t('Path'),dataIndex:'path',key:'path',sorter:(a,b)=>a.path.length - b.path.length,scopedSlots: { customRender: 'path' }},
				{title: this.$t('Alias2'),dataIndex:'pseudo',key:'pseudo',sorter:(a,b)=>a.pseudo.length - b.pseudo.length},
				{title: this.$t('Access-permission'),dataIndex:'access_type',key:'access_type',sorter:(a,b)=>a.access_type.length - b.access_type.length},
				{title: this.$t('Compress'),dataIndex:'squash',key:'squash',sorter:(a,b)=>a.squash.length - b.squash.length},
				{title: 'NFS '+this.$t('Version'),scopedSlots: { customRender: 'version' },sorter:(a,b)=>a.protocol.length - b.protocol.length},
				// {title: this.$t('Client'),dataIndex:'des',key:'des',sorter:(a,b)=>a.client.length - b.client.length},
				// {title: 'operation',dataIndex: 'operation',scopedSlots: { customRender: 'operation' }}
            ]
            this.ipcolumns=[
				{title: this.$t('Client'),dataIndex:'ip',key:'ip',sorter:(a,b)=>a.client.length - b.client.length},
				{title: this.$t('Access-permission'),dataIndex:'access_type',key:'access_type',sorter:(a,b)=>a.limit.length - b.limit.length},
				{title: this.$t('Compress'),dataIndex:'squash',key:'squash',sorter:(a,b)=>a.squash.length - b.squash.length},
            ]
        }
    },
    mounted(){
        if (this.$route.query.name) {
            this.createp = true
            this.$refs.createRef.initPath = this.$route.query.dir_name
            this.$router.push({ query: {} })
        }
        this.getList()
    },

    methods:{
        async getList(){
            // this.ipdata = []
			this.loading = true
			request('get', 'cephfs/ganesha/').then(res=>{
                // console.log('nfs表格列表', res);
                if(res.data.flag == 1) {
					this.model(res.data.id) //返回模板
					this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
				}else {
                    if(res.status == 200) {
                        console.log("status",res.data)
                        this.nfsdata = res.data.map(item => {
                            if (item.pseudo && item.pseudo.indexOf('/') == 0) {
                                item.pseudo = item.pseudo.slice(1)
                            }
                            return item
                        })
                        // this.selectedRowKeys = []; // 将选择的项清空
                        // this.ipdata = [];
                        if(this.nfsdata.length !== 0){
                            this.record = this.nfsdata[this.mark]
                            if(this.record.clients.length !== 0){
                                this.ipdata = [...this.record.clients];
                            }else{
                                this.ipdata = []
                            }
                        }
                    }
                }
                // else {
                //     if(Object.keys(res.data.params).length == 0) {
                //         this.$message.error(this.$t('Unknown-error'));
                //     }else {
                //         this.$message.error(res.data.params.detail);
                //     }
                // }
			}).catch(err => {

            }).finally(() => {
                this.loading = false;
            })
		},
        async openmodal(name){
	        if(this.selectedRowKeys.length!==0){
				// this.record = this.nfsdata[this.mark]
	          	if(name == 'delpath')
	            	this.delpath()
	          	else if(name == 'editp')
                    this.editp = true
                else if(name == 'editip')
				  	this.editip = true
			}
	        else{
	          this.$notification['error']({
	            message:this.$t('Choose')+this.$t('Operating-object')
	          })
	        }
        },
        onSelectChange (selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
			for(let i=0;i<this.nfsdata.length;i++){
				if(selectedRowKeys == this.nfsdata[i].id){
                    this.record = JSON.parse(JSON.stringify(this.nfsdata[i]));
                    // this.nfsdata[i].clients.forEach(item => {
                    //     this.ipdata.push(item);
                    // })
					this.mark = i;
				}
			}
        },
        changemodal(val, isCancel){
			this.createp=val
            this.editp=val
            this.editip=val
            if(!isCancel) {
                this.getList();
            }
            // this.ipdata = this.nfsdata[this.mark].clients
	    },

        // 删除nfs
        delpath(){
			let _this = this
	      	this.$confirm({
				title: this.$t('Delete'),
				content:this.$t('Sure-to-del')+": "+_this.record.path+" ？",
				cancelText:this.$t('Cancel'),
            	okText:this.$t('Sure'),
				okType:'danger',
				onOk(){
                    // _this.$axios({
                    //     method: 'delete',                                 
                    //     url: _this.allurl+'cephfs/nfs',
                    //     data: {
                    //         // fs_name:_this.record.fs_name,
                    //         id: _this.record.id,
                    //         path: _this.record.path
                    //     }
                    // })
                    request('DELETE', 'cephfs/ganesha/', {
                        id: _this.record.id,
                        // path: _this.record.path
                    })
                    .then(res=>{
                        _this.model(res.data.id) //返回模板
                        _this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                        // _this.gettask()  //任务栏信息
                        _this.mark = 0; //默认选项为第一个
                        _this.getList();
                        this.selectedRowKeys = []
                    });
				},
				onCancel(){
				// console.log('cancel')
				}
	      	})
	    },
	}
}
</script>
<style scoped>
.success {
    background-color: #129a9a;
}

.fail {
    background-color: #b62832
}</style>